<script setup lang="ts">
import CouponDistributeDialog from './CouponDistributeDialog.vue'
import CouponUploadPanel from './CouponUploadPanel.vue'
import CellParentInfo from '@/components/ProCell/CellParentInfo.vue'
import { CouponApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useConfirm, useDictFilterOptions, useForm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'CouponList' })

const userStore = useUserStore()
const router = useRouter()

const couponRef = ref<InstanceType<typeof CouponDistributeDialog>>()

const { form, resetForm } = useForm<CouponApi.CouponQuery>({
  name: undefined,
  parentPhone: undefined,
  couponStatus: undefined,
  orderId: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => CouponApi.getCouponPage({ ...form, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '优惠券名称', dataIndex: 'couponTemplateName', fixed: 'left', width:150 },
  { title: '领取家长', dataIndex: 'parentName', width:150 },
  { title: '联系方式', dataIndex: 'parentPhone',width:210 },
  { title: '领取方式', dataIndex: 'receiveType', slotName: 'receiveType', width:180, filterable: {
    filters: useDictFilterOptions('ReceiveTypeEnum'),
    multiple: true,
  } },
  // { title: '领取时间', dataIndex: 'receiveTime', width: 180, ellipsis: true, tooltip: true },
  { title: '使用状态', dataIndex: 'couponStatus', slotName: 'couponStatus', width:180, ellipsis: true, tooltip: true, filterable: {
    filters: useDictFilterOptions('CouponStatusEnum'),
    multiple: true,
  } },
  // { title: '使用时间', dataIndex: 'useTime', ellipsis: true, tooltip: true },
  { title: '报名订单', dataIndex: 'orderId',slotName: 'orderId', width:180, ellipsis: true, tooltip: true },
  { title: '发放人', dataIndex: 'createUserName',slotName: 'createUserName', width:120, ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:student:write']),
  },
]

// 筛选
const onFilterChange = (dataIndex, filteredValues) => {
  form[dataIndex] = filteredValues
}

// 删除
const onDelete = (item: CouponApi.CouponResp) => {
  return handleDelete(() => CouponApi.removeCoupon(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const onCancel = (row) => {
  return useConfirm(() => CouponApi.cancelCoupon(row.id), () => {
    search()
  }, {
    content: `确认撤销【${row.couponTemplateName}】优惠券吗？`,
    successTip: '您已成功撤销该优惠券',
    showModal: true,
  })
}

const refresh = () => {
  resetForm()
  search()
}

const onAdd = () => {
  couponRef.value?.open()
}

// 上传
const CouponUploadPanelRef = ref<InstanceType<typeof CouponUploadPanel>>()
const onUpload = () => {
  CouponUploadPanelRef.value?.open()
}

// 详情
const onOrderDetail = (row) => {
  router.push({ path: '/shop/enrollment/order/detail', query: { id: row.orderId } })
}

watch(() => form.couponStatus, () => search())
</script>

<template>
  <ProPage title="优惠券使用记录">
    <template #extra>
      <a-space>
        <a-button v-permission="['shop:coupon:distribute']" type="text" @click="onUpload">
          批量发放
        </a-button>
        <a-button v-permission="['shop:coupon:distribute']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>
            发放优惠券
          </template>
        </a-button>
      </a-space>
    </template>
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="refresh"
      @filter-change="onFilterChange"
    >
      <template #toolbar-left>
        <a-space size="large">
          <a-input v-model="form.parentPhone" placeholder="根据手机号模糊查询" allow-clear style="width: 200px;" @change="search">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
          <a-input v-model="form.name" placeholder="根据优惠券名称模糊查询" allow-clear style="width: 240px;" @change="search">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </a-space>
      </template>
      <template #receiveType="{ record }">
        <DictLabel v-model="record.receiveType" code="ReceiveTypeEnum" />
        <div class="text-13px text-gray">
          {{ record.receiveTime }}
        </div>
      </template>
      <template #couponStatus="{ record }">
        <DictLabel v-model="record.couponStatus" code="CouponStatusEnum" />
        <div class="text-13px text-gray">
          {{ record.useTime }}
        </div>
      </template>
      <template #parentPhone="{ record }">
        <CellParentInfo :name="record.parentName" :phone="record.parentPhone" :relation="record.parentRelation" />
      </template>
      <template #orderId="{ record }">
        <a-link @click="onOrderDetail(record)">
          {{ record.orderId }}
        </a-link>
      </template>
      <template #createUserName="{ record }">
        {{ record.createUserName? record.createUserName:'-' }}
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['shop:coupon:distribute']" @click="onCancel(record)">
            撤销
          </a-link>
        </a-space>
        <!-- <a-space>
          <a-link v-permission="['education:student:write']" @click="onDelete(record)">
            删除
          </a-link>
        </a-space> -->
      </template>
    </ProTable>
    <CouponDistributeDialog ref="couponRef" @ok="search" />
    <CouponUploadPanel ref="CouponUploadPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
